<script lang="ts" setup>
import {ref} from 'vue'
import {ProductListSerive,ProductDeleteSerive} from '@/api/product'
import ApplyOut from '../../componment/applyOut.vue'
import ApplyEdit from '../../componment/applyEdit.vue'
import { ElMessage } from 'element-plus'

const productList = ref([])
const Apply = ref()
const total=ref(0)
const AppEdit = ref()
const params = ref({
    in_product_id:null,
    pagenum:1,
    pagesize:10
}) 
const handleSizeChange = ()=>{

}
const handleCurrentChange = ()=>{

}

const getProductList = async()=>{
  const res =  await ProductListSerive(params.value)  
   productList.value =  res.data.data.result
   total.value = res.data.data.total
 
}
getProductList()

const applyOut = (row:any)=>{
 Apply.value.open()
}
const updateInfo = (row:any)=>{
  AppEdit.value.open(row)
}
const addInfo = ()=>{
  AppEdit.value.open()
}
const deleteInfo = async(row:any)=>{
   await ProductDeleteSerive(row.product_id)
   getProductList()
   ElMessage.success('删除成功！')
}
const onSuccess = (type:string)=>{
  if(type === 'add'){
    // 最好渲染最后一页
 const lastPage =Math.ceil( (total.value +1 ) /params.value.pagesize) 
   params.value.pagenum = lastPage
   
  }
   getProductList()
}
</script>

<template>
   <div class="wrapped">
  
       <div class="wrapped-content">
          <div class="select">
            <div class="input">
            <el-form-item>
                <el-input placeholder="输入入库编号进行搜索"  suffix-icon="Search"/>
            </el-form-item>
             <el-form-item>
                <el-button type="primary">搜索</el-button>
            </el-form-item>
            <el-form-item>
               <el-button type="primary">重置</el-button>
            </el-form-item>
            </div>
            <div class="btn">
                <el-button type="primary" @click="addInfo">添加产品</el-button>
            </div>
          </div>
             <el-table :data="productList" border  style="width: 100%">
             <el-table-column type="index" align="center" label="序号" width="80" />
             <el-table-column prop="in_product_id" align="center" label="入库编号" width="100" />
              <el-table-column prop="product_name" align="center" label="产品名称" width="100" />
             <el-table-column prop="category" align="center" label="产品类别" width="100" />
              <el-table-column prop="unit" align="center" label="单位" width="80" />
              <el-table-column prop="inventory_number" align="center" label="库存数量" width="200" />
              <el-table-column prop="unit_price" align="center" label="产品单价" width="200" />
              <el-table-column prop="inventory_price" align="center" label="库存总价" width="200" >
                <template #default="{row}">
                     {{row.inventory_number * row.unit_price}}
                </template>
              </el-table-column>
              <el-table-column prop="state" align="center" label="库存状态" width="200">
                <template #default="{row}">
                 <el-tag type="primary" v-if="row.inventory_number >= 10000">库存充足</el-tag>
                 <el-tag type="warning" v-else-if="row.inventory_number>=5000 && row.inventory_number<10000">库存稳定</el-tag>
                 <el-tag type="danger" v-else>库存短缺</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="in_charge" align="center" label="入库负责人" width="200" />
              <el-table-column prop="in_created_time" align="center" label="入库时间" width="200">
                <template #default="{row}">
                 {{row.in_created_time.slice(0,16)}}
                </template>
              </el-table-column>
              <el-table-column prop="update_time" align="center" label="最后修改时间" width="200" >
                <template #default="{row}">
                 {{row.update_time.slice(0,16)}}
                </template>
              </el-table-column>
              <el-table-column prop="in_note" align="center" label="入库备注" width="200" />
             <el-table-column  fixed="right"  align="center" label="操作" min-width="300">
                <template #default="{row}">
                    <el-button type="primary" @click="applyOut(row)">申请出库</el-button>
                    <el-button type="primary" @click="updateInfo(row)">修改</el-button>
                    <el-button type="danger" @click="deleteInfo(row)">删除</el-button>

                </template>
             </el-table-column>
             <template #empty>
            <el-empty description="暂无数据" />
            </template>
             </el-table>       
            <el-pagination
                v-model:current-page="params.pagenum"
                v-model:page-size="params.pagesize"
                :page-sizes="[5, 10, 20, 30]"
                :background="true"
                layout="jumper,total, sizes, prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="float: right; margin: 10px 0;"

            />

   </div> 
   
   </div>
   <ApplyEdit ref="AppEdit" @success="onSuccess" />
   <ApplyOut  ref="Apply"/>
</template>

<style lang="scss" scoped>
.wrapped{
.wrapped-content{
    height: 600px;
    padding: 0 10px;
    .select{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .input{
            display: flex;
            justify-content: flex-start;
            .el-input,.el-select{
              width: 200px;
              margin-right: 10px;
            }
            .el-button{
                margin-right:10px ;
            }
        }

    }
}
}
</style>